<!-- TODO: need to make a decision on whether to make strict or go extensibility option -->
<!-- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">-->
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> -->
<meta charset="UTF-8" />
<title>Auditor</title>
<link href="css_decor/auditor.app.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js_appliances/jquery.js"></script>
<style type="text/css">
/* @group Inputs **********************************/
div#frontforms input {
	/* default for radio and checkbox. Others will be handled directly */
	background-color: #fff;
}

input#uri,input#file,input#uploaded_file,input#keywords,input#short_desc,textarea
	{
	font-family: monospace, monospace;
	font-size: 0.9em;
	border: 1px solid #ccc;
	border-top: 1px solid #999;
	border-bottom: 1px solid #ddd;
	background: #fefefe url(../images/textbg.png) no-repeat top left;
	max-width: 100%;
	font-variant: normal;
}

input#uri,input#file,input#uploaded_file {
	width: 85%;
	margin: 0.3em 0 0 1em;
}

input#file,input#uploaded_file {
	width: 30em;
}

input#mailsearch,input#bugsearch {
	background-color: #eee;
	color: #365D95;
	padding: .3em 1em;
	border: 1px outset #ccc;
}

input#mailsearch:active,input#bugsearch:active {
	border-style: inset !important;
}

a.submit {
	display: block;
	width: 8em;
	text-align: center;
	margin: 0 auto;
	text-decoration: none;
}

textarea {
	min-width: 100%;
	width: 100%;
}

p.submit_button input {
	overflow: visible;
	width: auto;
	background: #fff;
	color: #365D95;
	padding: 0.3em 0.4em 0.1em 0.3em;
	font-size: 1.2em;
	width: 12em;
	text-align: center;
	border-bottom: 2px solid #444;
	border-right: 2px solid #444;
	border-top: 1px solid #aaa;
	border-left: 1px solid #aaa;
	background: #eee url(../images/grad.png) repeat-x top left;
	cursor: pointer;
}

p.submit_button input:active {
	color: #1f2126;
	border-bottom: 1px solid #aaa;
	border-right: 1px solid #aaa;
	border-top: 2px solid #444;
	border-left: 2px solid #444;
}

label {
	font-size: 0.9em;
	padding-left: .2em;
	padding-right: .2em;
}

div.options select {
	margin-right: 0.8em;
}

div.options label {
	margin-right: 0.3em;
}

div.options table,div.options tbody,div.options td,div.options th,div.options tr
	{
	margin: 0;
	padding: 0;
}

div.options table {
	border-collapse: collapse;
}

div.options th,div.options th label {
	font-weight: bold;
}

div.options td,div.options th {
	padding: 0.5em 1.1em 0.5em 0;
	text-align: left;
}

div.options td input {
	margin-right: 0.2em;
}

div.options select {
	width: 100%;
}

div.options table tr.subchoice th {
	padding-left: 3em;
}

tr.subchoice th label {
	padding-left: 0;
}

tr.subchoice th,tr.subchoice th label {
	font-size: 1em;
	font-weight: normal;
}
/* @end */

/* @group Tabs ********************************/
ul#tabset_tabs {
	height: 1.59em;
}

ul#tabset_tabs li {
	cursor: pointer;
	float: left;
	margin-right: 0.2em;
	background: #ddd url(../images/tab-tl.png) no-repeat top left;
	border-bottom: 1px solid #CBD0DB;
	-moz-border-top-left-radius: 4px;
	-moz-border-top-right-radius: 4px;
	-webkit-border-top-left-radius: 4px;
	-webkit-border-top-right-radius: 4px;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	-moz-box-shadow: 0px -1px 1px #ccc;
	-webkit-box-shadow: 0px -1px 1px #ccc;
	box-shadow: 0px -1px 1px #ccc;
	max-width: 33%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: clip;
}

ul#tabset_tabs li.selected {
	background: #eee url(../images/round-tl.png) no-repeat top left;
	border-bottom: 1px solid #eee;
}

ul#tabset_tabs li.selected a:link,ul#tabset_tabs li.selected a:visited {
	color: #1f2126;
	background: #eee url(../images/round-tr.png) no-repeat top right;
}

ul#tabset_tabs li span {
	color: #616571;
}

body ul#tabset_tabs li.selected a span {
	color: #3d424f;
}

ul#tabset_tabs li a:link,ul#tabset_tabs li a:visited {
	color: #365D95;
	display: block;
	padding: 0.515em 1.3em 0.215em 0.8em;
	background: #ddd url(../images/tab-tr.png) no-repeat top right;
	margin-left: 0.5em;
	font-size: 0.9em;
	font-weight: bold;
	text-decoration: none;
}

ul#tabset_tabs li a:hover,ul#tabset_tabs li a:active {
	color: #1f2126;
}

ul#tabset_tabs li a:hover span,ul#tabset_tabs li a:active span {
	color: #3d424f;
}

ul#tabset_tabs li.selected span {
	color: #5d6371;
}

/* @end */

/* @group Contents ******************************/
div#frontforms {
	background: #fff;
}

div#fields {
	clear: both;
	background: #eee url(../images/round-tr.png) no-repeat top right;
	padding: 0.5em 1.3em;
	border-bottom: 1px solid #DCDDE0;
	-moz-border-bottom-left-radius: 8px;
	-moz-border-top-right-radius: 8px;
	-webkit-border-bottom-left-radius: 8px;
	-webkit-border-top-right-radius: 8px;
	border-bottom-left-radius: 8px;
	border-top-right-radius: 8px;
	-moz-box-shadow: 1px 2px 2px #aaa;
	-webkit-box-shadow: 1px 2px 2px #aaa;
	box-shadow: 1px 2px 2px #aaa;
}

div#fields legend,div#fields p,div#fields p strong,div#fields p a,div#fields fieldset,div#fields form,div#fields form fieldset legend a,div#fields form p label,div#fields tr label
	{
	background-color: #eee;
}

fieldset {
	background: #eee;
}

legend {
	font-size: 1.1em;
	padding: 1em 0 0.23em;
	letter-spacing: 0.06em;
}

legend a:link,legend a:visited,legend a:hover,legend a:active {
	text-decoration: none;
}

legend.toggletext {
	cursor: pointer;
	padding-left: 0.2em;
}

legend.toggletext img {
	padding-bottom: 2px;
}

img.toggled {
	padding-bottom: 4px;
}

p.instructions {
	color: #4D525E;
	font-size: 0.80em;
	padding-bottom: 1em;
	padding-top: 0.5em;
}

p.instructions label {
	color: #4D525E;
	padding: 0;
	margin: 0;
	font-size: 1em;
}

div.options {
	padding: 0.7em 0 0.5em 1em;
}

div.options,p.submit_button,p.instructions,p#note {
	border-top: 1px solid #cbcdd5;
	background: #eee url(../images/double.png) left top repeat-x;
}

p.submit_button {
	padding: 0.6em 0 0;
	margin: 0;
	text-align: center;
}

p#note {
	clear: both;
	color: #4D525E;
	font-size: 0.9em;
	padding: 0.5em 0 0.1em;
}

/* @end */

/* @group Docs **********************************/
div.doc {
	margin: 1em 2em;
	padding: 0.5em 0 0.3em;
}

/* Set line height to 1.4x (from 1.3x on general site) to allow for various inline decoration. */
div.doc p,div.doc li {
	line-height: 150% !important;
}

div.doc p {
	margin-bottom: .7em;
	margin-top: .5em;
}

div.doc p,div.doc dt,div.doc ul,div.doc ol {
	margin-left: 1.5em;
	margin-right: 1.5em;
}

div.doc ul li {
	list-style-type: disc;
	margin-left: 1em;
}

/* documentation - table of contents */
#toc { /* making the toc a bit more compact and standing out */
	font-size: .85em;
	font-weight: bold;
	margin-bottom: 2em;
	margin-left: 3em;
}

div.doc div#toc ol,div.doc ol {
	list-style-type: decimal;
}

div.doc div#toc ol li {
	line-height: 130%;
	font-weight: bold;
}

div.doc div#toc ol li ol {
	list-style-type: lower-alpha;
	font-weight: normal;
	margin-left: 1em;
}

div.doc div#toc ol li ol li ol {
	list-style-type: lower-roman;
}

/* documentation - error explanations */
dl#expl dt code { /* headings for an error */
	white-space: normal;
	font-weight: bold;
}

dl#expl dt {
	border-top: 1px dashed black;
	margin-top: 2em;
	margin-bottom: 1em;
}

div.doc dt {
	margin-top: 1.2em;
	margin-bottom: .2em;
}

div.doc dt,div.doc dt a {
	font-style: italic;
}

div.doc dd {
	margin-right: 0;
	/* no need for the extra margin if we nicely put the text of the dd in a paragraph */
}

div.doc var { /* headings for an error */
	color: #006;
}

/* A snippet of code used inline. */
div.doc code {
	white-space: normal;
	display: inline;
	padding-left: .2em;
	padding-right: .2em;
	color: black;
	font-family: Monaco, "Courier New", monospace;
	border: 1px dotted #ccc;
}

div.doc code.block {
	display: block;
	padding: 1em;
	white-space: pre;
	margin-top: 1em;
	margin-bottom: 1em;
	margin-right: 3em;
}

div.doc pre {
	margin-left: 5em;
	padding-left: 2em;
	line-height: 150%;
	border-left: 1px solid #690;
}

div.doc code samp {
	font-weight: normal;
	color: black;
	font-style: italic;
}

/* reference tables */
div.doc table {
	border-collapse: collapse;
	border-right: 1px solid #ccc;
}

div.doc table td,.doc table th {
	border-top: 0px solid #ddd;
	border-bottom: 1px solid #ccc;
	border-left: 1px solid #eee;
	padding: 6px;
	border-collapse: collapse;
}

div.doc table th {
	background-color: #eee;
	color: #11111A;
	border-right: 1px solid #ccc;
}

div.doc table {
	margin-top: 1em;
	margin-bottom: .5em;
	border-collapse: collapse;
	border-right: 1px solid #ccc;
}

div.doc td,div.doc th {
	border-top: 0px solid #ddd;
	border-bottom: 1px solid #ccc;
	border-left: 1px solid #eee;
	border-collapse: collapse;
}

div.doc th {
	background-color: #eee;
	color: #11111A;
	border-right: 1px solid #ccc;
}

/* @end */
</style>
</head>
<body id="auditor-app">
	<div class="ui-window">
		<header class="ui-header">
			<div class="ui-logo">
				<hgroup class="titlegroup">
					<h1 class="title">Auditor</h1>
					<h2 class="subtitle">Docs Quality Review Tools</h2>
				</hgroup>
			</div>
		</header>
		<div class="ui-screen">
			<section class="ui-appview-toolbar">
				<ul class="ui-appview-tools">
				</ul>
			</section>
			<section class="ui-workspace">
				<!--<div class="ui-widget" id="webdiff-plugin">
									<div class="ui-logo">
										<hgroup class="titlegroup">
											<h1 class="title">WebDiff</h1>
											<h2 class="subtitle">for Publican DocBook</h2>
										</hgroup>
									</div>
									<section class="ui-input-field" id="left-doc">
										<label for="webdiff-compare-left-doc">Previously reviewed
											version:&nbsp;</label>
										<fieldset>
											<select class="ui-input" id="webdiff-compare-left-doc-type">
												<option value="1" selected="selected">From URL</option>
												<option value="2">From local file</option>
											</select>
										</fieldset>
										<fieldset>
											<input type="text" class="ui-input" id="webdiff-compare-left-doc" />
										</fieldset>
									</section>
									<section class="ui-input-field" id="left-doc">
										<label for="webdiff-compare-right-doc">Document under
											review:&nbsp;</label>
										<fieldset>
											<select class="ui-input" id="webdiff-compare-right-doc-type">
												<option value="1" selected="selected">From URL</option>
												<option value="2">From local file</option>
											</select>
										</fieldset>
										<fieldset>
											<input type="text" class="ui-input"
												id="webdiff-compare-right-doc" />
										</fieldset>
									</section>
									<section class="ui-input-field" id="submit">
										<button class="ui-input ui-button" id="webdiff-compare">Compare
											document versions</button>
									</section>
								</div>-->
				<div class="ui-widget" id="webdiff-plugin">
					<div id=""></div>
					<div id="frontforms">
						<ul id="tabset_tabs">
							<li class=""><a id="input_from_uri" href="#input_from_uri">
									<span>Review by</span> URI
							</a></li>
							<li class=""><a id="input_from_upload"
								href="#input_from_upload"> <span>Review by</span> File
									Upload
							</a></li>
							<li class="selected"><a id="input_from_input"
								href="#input_from_input"> <span>Review by</span> Direct
									Input
							</a></li>
						</ul>
						<div id="fields">
							<fieldset id="input-from-uri" class="tabset_content front"
								style="display: none; visibility: hidden; opacity: 0;">
								<legend class="tabset_label">Review document by URI</legend>
								<form action="check" method="get">
									<p class="instructions">Review an online document:</p>
									<p>
										<label for="uri" title="Address of page to Validate">Address:</label>
										<input id="uri" type="text" size="45" name="uri">
									</p>
									<div class="ui-input-field submit_button">
										<input type="submit" value="Check"
											title="Submit for validation" style="display: none;">
										<a class="ui-input ui-button submit" href="#">Review</a>
									</div>
								</form>
							</fieldset>
							<fieldset id="input-from-upload" class="tabset_content front"
								style="display: none; visibility: hidden; opacity: 0;">
								<legend class="tabset_label">Review document by File
									Upload</legend>
								<form action="check" enctype="multipart/form-data" method="post">
									<p class="instructions">Upload the document for review:</p>
									<p>
										<label for="uploaded_file"
											title="Choose a Local File to Upload and Validate">File:</label>
										<input id="uploaded_file" type="file" size="30"
											name="uploaded_file">
									</p>
									<div class="ui-input-field submit_button">
										<input type="submit" value="Check"
											title="Submit for validation" style="display: none;">
										<a class="ui-input ui-button submit" href="#">Review</a>
									</div>
								</form>
								<p>
									<strong>Note</strong> : file upload may not work with Internet
									Explorer on some versions of Windows XP Service Pack 2, see our
									<a href="http://www.w3.org/QA/2005/01/Validator-IE_WinXP_SP2">information
										page</a> on the W3C QA Website.
								</p>
							</fieldset>
							<fieldset id="input-from-input" class="tabset_content front"
								style="display: block; visibility: visible; opacity: 1;">
								<legend class="tabset_label">Review document by direct
									input</legend>
								<form action="check" enctype="multipart/form-data" method="post">
									<p class="instructions">
										<label for="fragment"
											title="Paste a complete (HTML) Document here">Enter
											the Markup for the document under review</label> : <br>
										<textarea id="fragment" cols="80" rows="12" name="fragment"></textarea>
									</p>
									<div class="ui-input-field submit_button">
										<input type="submit" value="Check"
											title="Submit for validation" style="display: none;">
										<a class="ui-input ui-button submit" href="#">Review</a>
									</div>
								</form>
							</fieldset>
						</div>
					</div>
					<script type="text/javascript">
						var selected = "selected",

						swapTo = function(id, a) {
							var $current, target, selectedTab;
							$current = $(".tabset_content:visible");
							if ($current && $current.attr("id") === id) {
								return true;
							} else {
								$current.css({
									"display" : "none",
									"visibility" : "hidden",
									"opacity" : 0
								});
								target = $("#" + id).css({
									"display" : "block",
									"visibility" : "visible",
									"opacity" : 1
								});
								selectedTab = $("#tabset_tabs>.selected");
								selectedTab.toggleClass(selected);
								$(a).parent().toggleClass(selected);
							}
						};

						$("#input_from_uri").bind("click", function(e) {
							swapTo("input-from-uri", this);
						});
						$("#input_from_upload").bind("click", function(e) {
							swapTo("input-from-upload", this);
						});
						$("#input_from_input").bind("click", function(e) {
							swapTo("input-from-input", this);
						});
					</script>
				</div>
				<div class="ui-widget" id="auditor-contents"></div>
			</section>
			<section class="under-foot"></section>
		</div>
		<footer class="ui-footer">
			<div class="ui-footnotes"></div>
		</footer>
	</div>
	<script type="text/javascript" src="js_appliances/auditor.web_diff.js"></script>
	<script type="text/javascript" src="js_appliances/auditor.app.js"></script>
</body>
</html>